import $ from 'jquery'
import getCart from '../shoppingCart/getCart.js'
import StateMachine from 'javascript-state-machine'
import { log } from '../utils/log.js'
export default class Item {
  constructor(list,data){
    this.list = list
    this.data = data
    this.$el = $('<div></div>')
    this.cart = getCart() //（单例模式）
  }
  // 初始化 (模版模式)
  init() {
    this.initContent()
    this.initBtn()
    this.render()
  }
  // 初始化内容
  initContent() {
    let $el = this.$el
    let data = this.data
    $el.append($(`<p>名称：${data.name}</p>`))
    $el.append($(`<p>价格：${data.price}</p>`))
  }
  // 初始化按钮
  initBtn() {
    let $el = this.$el
    let $btn = $('<button>')
    // 状态模式
    let fsm = new StateMachine({
      init: '加入购物车',
      transitions: [
        {
          name: 'addToCart',
          from: '加入购物车',
          to: '从购物车删除'
        },
        {
          name: 'delToCart',
          from: '从购物车删除',
          to: '加入购物车'
        }
      ],
      methods: {
        //加入购物车
        onAddToCart: () => {
          this.addToCartHandle()
          updateText()
        },
        //购物车删除
        onDelToCart: () => {
          this.delToCarHandle()
          updateText()
        }
      }
    })
    function updateText() {
      $btn.text(fsm.state)
    }
    $btn.click(() => {
      // 添加或删除
      if (fsm.is('加入购物车')) {
        fsm.addToCart()
      } else {
        fsm.delToCart()
      }
    })
    updateText()
    $el.append($btn)
  }

  // 添加到购物车 （log装饰器模式）
  @log('add')
  addToCartHandle() {
    this.cart.add(this.data)
  }
  // 从购物车删除 （log装饰器模式）
  @log('del')
  delToCarHandle(){
    this.cart.del(this.data.id)
  }
  // 渲染
  render() {
    this.list.$el.append(this.$el)
  }
}